<template>
  <view class="page">
    <scroll-view scroll-y="true" class="classify" :scroll-top="scrollTop" @scroll="eventScroll"
      scroll-with-animation="true">
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
      <view class="item">早餐</view>
      <view class="item">套餐</view>
    </scroll-view>
    <view @click="goTop()">滚到顶部</view>
    <navigator open-type="navigate" url="/pages/scroll-view-1/scroll-view-1">---->横向滚动效果</navigator>
    <navigator open-type="navigate" url="/pages/scroll-view-2/scroll-view-2">---->解决scroll-view中内嵌input真机卡顿问题</navigator>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 设置竖向滚动条位置
        scrollTop: 0
      };
    },
    onLoad() {
      // 记录当前竖向滚动的位置
      this.tmpScrollTop = 0;
    },
    methods: {
      goTop() {
        this.scrollTop = this.tmpScrollTop;
        setTimeout(() => {
          this.scrollTop = 0;
        }, 30)
      },
      eventScroll(event) {
        console.log(event.detail.scrollTop, '-----------------------')
        this.tmpScrollTop = event.detail.scrollTop;
      }
    }
  }
</script>

<style lang="scss">
  .page {
    width: 200%;
    height: 100vh;
    background-color: aqua;
  }

  .classify {
    width: 200rpx;
    height: 400rpx;
    border: 1px solid #007aff;
    overflow: hidden;
  }

  .classify .item {
    width: 100%;
    height: 60rpx;
  }
</style>